<template>
  <div class="swh-container">
    <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{curlan}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="cn">{{$t('message.cn')}}</el-dropdown-item>
        <el-dropdown-item command="en">{{$t('message.en')}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  export default
  {
    methods: {
      handleCommand(command) {
        if(command == "cn")
        {
          this.$i18n.locale = 'cn'
        }else if(command == "en")
        {
          this.$i18n.locale = 'en'
        }
      }
    }
    ,
    computed: {
      // a computed getter
      curlan: function () {
        // `this` points to the vm instance
        var str = "";
        if(this.$i18n.locale == "cn")
          str = this.$t('message.cn')
        else  if(this.$i18n.locale == "en")
          str = this.$t('message.en')
        return str
      }
    }
  }
</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #FFFFFF;
  }
  .el-icon-arrow-down {
    font-size: 16px;
  }
  .swh-container{
    position:absolute;
    right:100px;
    top:30px;
  }
</style>
